<template>
    <div>
        <!-- 面包屑导航条位置 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>商品分类</el-breadcrumb-item>
        </el-breadcrumb>
<!-- 卡片内容区域 -->
        <el-card class="box-card" > 
            <el-row >
                <el-col>
                    <el-button type="primary" @click="showCateDialog">添加分类</el-button>
                </el-col>
            </el-row>

            <!-- 表格区域 -->

            <tree-table 
            class="TreeTable"
            show-index
            :data="cateList" 
            :columns="columns"
            :selection-type="false"
            :expand-type="false"
            border
            show-row-hover
            >
            <!-- 是否有效显示模板 -->
            <template slot="isok" slot-scope="scope">
                <i class="el-icon-success" v-if="scope.row.cat_deleted === false" style="color: lightgreen;"></i>
                <i class="el-icon-error" v-else style="color: red;"></i>
            </template>
            <!-- 等级显示模板 -->
            <template slot-scope="scope" slot="level">
                <el-tag type="primary"  size="mini" v-if="scope.row.cat_level == 0 ? true : false">一级</el-tag>
                <el-tag type="success"  size="mini" v-if="scope.row.cat_level == 1 ? true : false">二级</el-tag>
                <el-tag type="warning"  size="mini" v-if="scope.row.cat_level == 2 ? true : false">三级</el-tag>
            </template>
            <!-- 操作模板 -->
             <template  slot="operation" slot-scope="scope">
                <el-button type="primary"  size="mini" icon="el-icon-edit" @click="modifyCate(scope.row.cat_id)">编辑</el-button>
                <el-button type="success"  size="mini" icon="el-icon-delete" @click="deleteCates(scope.row.cat_id)">删除 </el-button>
             </template>
            </tree-table>

             <!-- //分页区域 -->
            <div class="block">
                <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="queryInfo.pagenum"
                :page-sizes="[3, 5, 10, 15]"
                :page-size="queryInfo.pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="parseInt(total)">
                </el-pagination>
            </div>
        </el-card>




     
                        <!-- <el-button type="primary"  size="mini" icon="el-icon-edit" >编辑</el-button>
                        <el-button type="success"  size="mini" icon="el-icon-delete" >删除</el-button> -->


            <!-- 添加角色弹框 -->
            <el-dialog
            title="添加分类"
            :visible.sync="addDialogVisible"
            width="50%" @close="addDialogClosed"           
            >
            <!--  文本主题区域 --> 
            <el-form :model="addCateForm" status-icon :rules="addCateRules" ref="addCatesRef" >    
                <el-form-item label="分类名称" prop="cat_name">
                    <el-input type="text" v-model="addCateForm.cat_name" autocomplete="off"></el-input>
                </el-form-item>
            <el-form-item label="  父级分类">
                <!-- 父级选择框 -->
                <el-cascader     
                    clearable
                    :props="cascaderProps"
                    :options="options"                    
                    v-model="selectedOptions2"
                    @change="handleChange">
                </el-cascader>               
            </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addCate">确 定</el-button>
            </span>
            </el-dialog>

            <!-- 修改信息弹出面板 -->
             <el-dialog
            title="修改用户信息"
            :visible.sync="modifyDialogVisible"
            width="50%"
            @close="modifyDialogClosed"           
            >
            <!-- 文本主题区域 -->
            <el-form :model="modifyCateForm" status-icon ref="modifyCatesRef"  >
            <el-form-item label="角色名称" >
                <el-input type="text"  v-model="modifyCateForm.cat_name" autocomplete="off"></el-input>
            </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="modifyDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="modifyCateInfo">确 定</el-button>
            </span>
            </el-dialog>
             

        
    </div>
</template>

<script>
export default {
    data() {
        return {
            //指定选择器的配置对象
            cascaderProps: {
                value: 'cat_id',
                label: 'cat_name',
                children: 'children',
                expandTrigger: "hover",
                checkStrictly: "true"
            },
            //要修改的信息存放
            modifyCateForm: {},
            //父级选择框的渲染数据
            options: [],
            //双向绑定选择框的数据
            selectedOptions2: [],
            modifyDialogVisible: false,
            addDialogVisible: false,
            //添加分类表单
            addCateForm: {
                cat_name: '',
                cat_pid: 0,
                //分类等级默认一级分类
                cat_level: 0
            },
            addCateRules: {
                cat_name: [
                    { required: true, message: '请输入分类名', trigger: 'blur' },
                    { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
                ],
            },
            //查询请求
            queryInfo: {
                type: 3,
                pagenum: 1,
                pagesize: 5
            },
            cateList: [],
            //总数据条数
            total: '',
            columns: [
            {
                label: "分类名称",
                prop: "cat_name"
            },
            {
                label: "是否有效",
                prop: "cat_deleted",
                type: "template",
                template: "isok"
            },
            {
                label: "排序",
                prop: "cat_level",
                type: "template",
                template: "level"
            },
            {
                label: "操作",
                prop: "",
                type: "template",
                template: "operation"
            }
            ]
        }
    },
   
    created () {
        this.getCateList()
        
    },
    methods: {
        async getCateList () {
          const {data: res} = await this.$http.get('categories',{params: this.queryInfo})
          if(res.meta.status !== 200) return this.$message.error('获取商品分类数据失败')
            this.cateList = res.data.result            
            this.total = res.data.total
        },
        //监听pagesize改变的事件
        handleSizeChange (newSize) {
            this.queryInfo.pagesize = newSize
            this.getCateList()
        },
        //监听页码改变的事件
        handleCurrentChange (newPage) {
            this.queryInfo.pagenum = newPage
            this.getCateList()
        },
        showCateDialog () {
            this.getOptions()
            this.addDialogVisible = true
        },
        //关闭表单，重置数据
        addDialogClosed () {
            this.$refs.addCatesRef.resetFields()
            this.selectedOptions2 = []
            this.addCateForm.cat_pid = 0
            this.addCateForm.cat_level = 0 
        },
        async getOptions () {
            const {data: res} = await this.$http.get('categories',{params: {type: 2}})
            if(res.meta.status !==200) return this.$message.error('获取选择器数据失败')
            this.options = res.data
        },
        //选择器改变触发
        handleChange () {
            if(this.selectedOptions2.length > 0) {
                //父级分类的id
               this.addCateForm.cat_pid = this.selectedOptions2[this.selectedOptions2.length - 1]
               //为当前分类的等级赋值
                this.addCateForm.cat_level = this.selectedOptions2.length
                return 
            }else {
                //父级分类的id
                 this.addCateForm.cat_pid = 0
                this.addCateForm.cat_level = 0 
            }
            
        },
        //提交添加分类表单
         addCate () {
            this.$refs.addCatesRef.validate(async valid => {
                if(!valid) return 
                const {data: res} = await this.$http.post('categories',this.addCateForm)
                if(res.meta.status !== 201) return this.$message.error('添加分类失败')
                this.$message.success('添加分类成功')
                this.getCateList()
                this.addDialogVisible = false
            })
        },
        //删除分类，根据id
        async deleteCates (id) {           
            const confirmResult = await this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).catch(err => err)//.catch()捕获错误信息并返回

            if(confirmResult !== 'confirm'){
                return this.$message.info('已经取消了删除')
            }
            //确定删除操作
            const {data: res} = await this.$http.delete('categories/'+ id)   
            if(res.meta.status !== 200) return this.$message.error('删除角色失败') 
            this.$message.success('成功删除角色')
            this.getCateList()
        },

        //监听关闭窗口
        modifyDialogClosed () {
            this.$refs.modifyCatesRef.resetFields()
        },

        //编辑分类，根据id，先查询到信息显示到面板
//根据id修改角色,先查询到角色，并将数据获取到弹出文本框中，分为两步
        async modifyCate (id) {
            this.modifyDialogVisible = true
            const {data: res} = await this.$http.get('categories/'+ id,)
            if(res.meta.status !== 200) return this.$message.error('修改信息失败')
            
            //存放要修改的数据的面板
            this.modifyCateForm = res.data
        },
        //第二部，提交修改后的信息,id在获取到的modifyCatesForm中
        async modifyCateInfo () {
            const {data: res} = await this.$http.put('categories/' + this.modifyCateForm.cat_id + '',{
                cat_name: this.modifyCateForm.cat_name,
            })
            if(res.meta.status !==200) return this.$message.error('修改角色信息失败')

            this.$message.success('修改角色信息成功')
            this.getCateList()
            this.modifyDialogVisible = false

        },

    },
};
</script>

<style scoped lang="scss">
.TreeTable {
    margin-top: 10px;
}
.el-cascader{
    width: 80%;
}

</style>
